import React, { Component } from "react";
import './index.css';
import axios from 'axios';

export default class HeroList extends Component {

    state = {
        heros: [] // 
    }

    render() {
        return (
            <div className="hero-container">
                <h2>选择你的英雄</h2>
                <div className="hero-list">
                    {
                        this.state.heros.map(item => {
                            return <div className="item" key={item.id}>
                                        <div className="img">
                                            <img
                                                src={item.card}
                                                alt=""
                                            />
                                        </div>
                                        <p>{item.name}</p>
                                    </div>
                        })
                    }
                    
                </div>
            </div>
        );
    }

    async componentDidMount(){
        let result = await axios('http://api.xiaohigh.com:8090/lol');
        this.setState({
            heros: result.data
        })
    }

}
